<template>
	<view
		class="container"
		v-show="allInfo"
	>
		<view class="header">
			<image
				class="bg"
				src="@/static/images/center/bg.png"
				mode=""
			></image>
			<image
				class="moneybg"
				src="@/static/images/center/moneyBg.png"
				mode=""
			></image>
			<view class="canGet">
				<view class="title">
					可提现金额(元)
				</view>
				<view class="num">
					{{allInfo.ketixian}}
				</view>
			</view>
			<view class="allMoney flexCenter">
				<view class="item">
					<view class="title">
						预估分佣金额(元)
					</view>
					<view class="num">
						{{allInfo.yugufenyong}}
					</view>
				</view>
				<view class="line">

				</view>
				<view class="item">
					<view class="title">
						已提现金额(元)
					</view>
					<view class="num">
						{{allInfo.yitixian}}
					</view>
				</view>
			</view>
			<button
				class="submit"
				@tap="getCash"
			>立即提现</button>
		</view>
		<view class="main margin32">
			<view class="title">
				提现明细
			</view>
			<uni-datetime-picker
				v-model="range"
				@change="dateChange"
				type="daterange"
			/>
			<view class="time">

			</view>
			<Money
				class=""
				v-for="item,index in list"
				:key="index"
				:list="item"
			></Money>
		</view>
	</view>

</template>
<script>
import Money from "@/pages/components/money/money.vue"
import {
	Home
} from '@/config/API.js'
// import mixins from "@/mixins/mixins.js"
export default {
	components: {
		Money
	},
	// mixins: [mixins],
	data () {
		return {
			range: ['2023-06-7', '2023-7-7'],
			form: {
				limit: 5,
				page: 1
			},
			list: [],
			allInfo: {},
		};
	},
	created () {
		let temp = this.formatTime()
		this.range = temp;
	},
	onShow () {
		this.clear()
		this.init()
	},
	onPullDownRefresh () {
		this.clear()
		this.init();
	},
	onReachBottom () {
		this.init();
	},
	methods: {
		clear () {
			this.form.page = 1;
			this.list = [];
		},
		init () {
			Home.yongjin({
				...this.form,
				type: this.current,
				begin: this.range[0],
				end: this.range[1]
			}).then(res => {
				uni.stopPullDownRefresh()
				this.form.page++;
				this.list.push(...res.data.list);
				this.allInfo = res.data;
				if (res.data.list.length < 1) {
					uni.showToast({
						icon: "none",
						title: "没有更多数据了"
					})
					this.form.page--
				}
			})
		},
		getCash () {
			uni.navigateTo({
				url: "/pages/center/getCash/getCash"
			})
		},
		dateChange (res) {
			console.info("---",res)
			if (res.length != 2) {
				uni.showToast({
					icon: "error",
					title: "日期需选择范围"
				})
			}
			this.range = res;
			this.clear()
			this.init()
		},
		formatTime () {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			month.toString().padStart(2, 0)
			let temp = [`${year}-${month}-01`, `${month != 12 ? year : year + 1}-${month != 12 ? month - 0 + 1 : 1}-01`]
			return temp
		}
	}
}
</script>
<style>
page {
	background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
.header {
	position: relative;

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 493rpx;
		z-index: -2;
	}

	.moneybg {
		position: absolute;
		top: 60rpx;
		left: 32rpx;
		width: 686rpx;
		height: 577rpx;
		z-index: -1;
	}

	.canGet {
		margin-left: 90rpx;
		margin-top: 119rpx;

		.title {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #858585;
		}

		.num {
			font-size: 56rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #f51919;
			margin-bottom: 92rpx;
		}
	}

	.allMoney {
		.line {
			width: 0rpx;
			height: 68rpx;
			opacity: 1;
			border: 1rpx solid #d9d9d9;
		}

		.item {
			flex: 1;
			text-align: center;

			.title {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				margin-bottom: 24rpx;
			}

			.num {
				font-size: 40rpx;
				font-family: DIN-Bold, DIN;
				font-weight: bold;
				color: #333333;
				margin-bottom: 55rpx;
			}
		}
	}

	.submit {
		margin: 0 auto;
		width: 656rpx;
		height: 88rpx;
		background: linear-gradient(270deg, #ff0000 0%, #fe5454 100%);
		border-radius: 70rpx 70rpx 70rpx 70rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
}

.main {
	margin-top: 124rpx;

	.title {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #111111;
		margin-bottom: 25rpx;
	}
	.time {
		margin-bottom: 25rpx;
	}
}
</style>